<template>
  <view class="detail-container">
    <view class="nav-bar">
      <customtop top_title="项目详情"></customtop>
    </view>
    <view class="container">
      <view class="title">
        {{ detail.title }}
        <view class="user-info">
          <view class="time">32分钟前来过</view>
          <view class="real-name">已实名</view>
        </view>
      </view>
      <view class="content">
        <view class="detail-info-container">
          <view class="cash-pledge" v-if="detail.issyxm == 1">项目已经上押{{ detail.yajin }}元</view>

          <view class="detail-box">
            <view class="browse">
              <view class="title">浏览次数</view>
              <view class="num">{{ detail.cksl }}</view>
            </view>
            <view class="browse">
              <view class="title">项目详情</view>
              <view class="num">{{ detail.category_name }}</view>
            </view>
            <view class="browse">
              <view class="title">已咨询数</view>
              <view class="num">{{ detail.zxsl }}</view>
            </view>
            <view class="browse">
              <view class="title">发布时间</view>
              <view class="num" v-if="detail.created_at">{{
                detail.created_at.split(" ")[0]
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="content-description">
        <view class="content-item">
          <view class="title">1.项目名称</view>
          <view class="content"> {{ detail.xmmc }} </view>
        </view>

        <view class="content-item">
          <view class="title">2,项目介绍</view>
          <view class="content"> {{ detail.xmjs }} </view>
        </view>
        <view class="content-item">
          <view class="title">3.合作要求</view>
          <view class="content"> {{ detail.hzyq }} </view>
        </view>
        <view class="content-item">
          <view class="title">4.收益利润</view>
          <view class="content"> {{ detail.sylr }} </view>
        </view>
        <view class="content-item">
          <view class="title">5.费用说明</view>
          <view class="content"> {{ detail.fysm }} </view>
        </view>
      </view>
      <!-- 风险说明 -->
      <view class="explain">
        <view class="stitle"><span class="txt">风险提示</span></view>
        <view class="bd">
          <view class="">建立合作之前，请务必签订合同，我们做为信息共享平台方，无法对信息的真实性及准确性做出判断不承担任何财产损失和法律责任.</view>
          <view class="">若您不同意该提示，请关闭页面且不要在本平台拓展任何商业合作</view>
          <view class="">否则造成的任何损失由您个人承担</view>
        </view>
      </view>
    </view>
    <view class="contact-information">
      <view class="name" @click="colletClick">
        <u-icon size="30" :color="detail.is_ysc == 1 ? '#3092ff' : ''"
          :name="detail.is_ysc == 1 ? 'star-fill' : 'star'"></u-icon>
        <text>{{ detail.is_ysc ? "已收藏" : "收藏" }}</text>
      </view>
      <view class="btn" :style="{ background: detail.is_yck !== 0 ? '#e9f3ff' : '' }" @click="examineClick">
        <text v-if="detail.is_yck == 0">查看TA的联系方式</text>
        <text v-else class="isExamin">已查看，点击展开</text>
      </view>
    </view>
    <u-popup :show="examineShow">
      <view class="popup-container">
        <view class="title"> 联系方式一览 </view>
        <view class="user-info">
          <view class="user-item">
            <view class="info">
              <image class="img" src="../../static/my-img/phone.png" mode="scaleToFill" />
              <view class="name">手机号:</view>
              <view class="number">{{ examineShowInfo.phone }}</view>
            </view>
            <view class="copy" @click="copyClick(examineShowInfo.phone)">复制</view>
          </view>
          <view class="user-item">
            <view class="info">
              <image class="img" src="../../static/my-img/wechat.png" mode="scaleToFill" />
              <view class="name">微信号:</view>
              <view class="number">{{ examineShowInfo.phone }}</view>
            </view>
            <view class="copy" @click="copyClick(examineShowInfo.phone)">复制</view>
          </view>
          <view class="user-item">
            <view class="info">
              <image class="img" src="../../static/my-img/QQ.png" mode="scaleToFill" />
              <view class="name">QQ号:</view>
              <view class="number">{{ examineShowInfo.qq }}</view>
            </view>
            <view class="copy" @click="copyClick(examineShowInfo.qq)">复制</view>
          </view>
        </view>
        <view class="tip">
          社交账号有风控算法，如果搜索不到或者对方长时间未同意好友请求，说明对方账号可能被限制添加好友，伤可以拨打对方手机号;
        </view>
        <view class="close" @click="closeClick">
          <u-icon size="20" name="close"></u-icon>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    request
  } from "@/utils/http.js";

  import customtop from "@/components/customtop";
  export default {
    components: {
      customtop
    },
    data() {
      return {
        id: "",
        detail: {},
        examineShow: false,
        examineShowInfo: {},
      };
    },
    onLoad(options) {
      this.id = options.id;
      this.getDetail();
    },
    methods: {
      goHome() {
        uni.switchTab({
          url: "/pages/index/index"
        });
      },
      // 收藏
      colletClick() {
        if (this.detail.is_ysc !== 0) {
          request
            .post("/xiangmushe/removeCollectArticle", {
              id: this.id,
            })
            .then((res) => {
              this.getDetail();
            });
        } else {
          request
            .post("/xiangmushe/collectArticle", {
              id: this.id,
            })
            .then((res) => {
              this.getDetail();
            });
        }
      },
      copyClick(text) {
        uni.setClipboardData({
          data: text,
          success: function() {
            console.log("success");
          },
        });
      },
      closeClick() {
        this.examineShow = false;
      },
      // 查看联系方式
      examineClick() {
        uni.showLoading({
          title: "",
          mask: true,
        });
        this.examineShow = true;
        request
          .post("/xiangmushe/chakanFabuzheXinxi", {
            id: this.id,
          })
          .then((res) => {
            this.examineShowInfo = res.data;
          });
        this.getDetail();
        uni.hideLoading();
      },
      getDetail() {
        request
          .post("/xiangmushe/getArticle", {
            id: this.id,
          })
          .then(({
            data
          }) => {
            console.log(data);
            this.detail = data;
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .nav-bar {
    font-size: 28rpx;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }

  .container {
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .title {
      font-size: 28rpx;
      font-weight: 500;
      padding-bottom: 15rpx;

      .user-info {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        align-items: center;

        .time {
          font-size: 24rpx;
          color: #979797;
        }

        .real-name {
          color: #67b2e5;
          font-size: 24rpx;
        }
      }
    }

    .content {
      padding-bottom: 30rpx;

      .detail-info-container {
        background-color: #f3f4f8;
        border-radius: 20rpx;
        margin-top: 30rpx;
        padding: 20rpx 0;
        box-sizing: border-box;

        .cash-pledge {
          display: flex;
          justify-content: center;
          margin: 10rpx;
          font-size: 26rpx;
          font-weight: bold;
        }

        .detail-box {
          display: flex;
          flex-wrap: wrap;

          .browse {
            width: 300rpx;
            text-align: center;

            .title {
              font-size: 24rpx;
              color: #a5a6aa;
              margin-top: 10rpx;
            }

            .num {
              font-size: 24rpx;
              font-weight: bold;
            }
          }
        }
      }
    }

    .content-description {
      .content-item {
        margin-bottom: 20rpx;

        .title {
          font-size: 28rpx;
          padding-bottom: 10rpx;
        }

        .content {
          padding: 0 20rpx;
          box-sizing: border-box;
          letter-spacing: 5rpx;
          font-size: 27rpx;
        }
      }
    }

    .explain {
      .stitle {
        font-size: 26rpx;
      }

      font-size: 24rpx;
    }
  }

  .contact-information {
    background: rgba(255, 255, 255, 0.8);
    height: 120rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);

    .name {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 28rpx;
      color: #000;
    }

    .btn {
      width: 400rpx;
      background-color: #3092ff;
      color: #fff;
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 30rpx;
      border-radius: 10rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;

      .isExamin {
        color: #2684f1;
        font-size: 26rpx;
      }
    }
  }

  .popup-container {
    height: 650rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    box-sizing: border-box;

    .title {
      font-size: 28rpx;
      letter-spacing: 5rpx;
    }

    .user-info {
      width: 600rpx;
      margin-top: 40rpx;

      .user-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30rpx 0;

        .info {
          display: flex;
          align-items: center;
        }

        .img {
          width: 40rpx;
          height: 40rpx;
          margin-left: 20rpx;
        }

        .name {
          font-size: 26rpx;
          margin-left: 20rpx;
        }

        .number {
          font-size: 26rpx;
          margin: 0 20rpx;
        }

        .copy {
          padding: 5rpx 30rpx;
          box-sizing: border-box;
          border-radius: 30rpx;
          font-size: 26rpx;
          color: #2b9bfd;
          background-color: #e9f3ff;
        }
      }
    }

    .tip {
      margin-top: 30rpx;
      width: 600rpx;
      font-size: 24rpx;
      letter-spacing: 5rpx;
    }

    .close {
      margin-top: 20rpx;
    }
  }
</style>

<style>
  page {
    background-color: #fff;
  }
</style>
